<template>
  <div class="Footer">
    <div class="lisi">
      <ul>
        <li v-for="(item, index) in this.$store.state.a.arr" :key="index">
          <img :src="item.img" alt="" />
          <div>
            <p>
              <span>{{ item.price }}</span
              >{{ item.text }}
            </p>
            &nbsp;&nbsp;&nbsp;
            <p class="title">{{ item.title }}</p>
          </div>
        </li>
      </ul>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <div class="footer-inner">
        <ul class="footer-vip">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <div class="footer_list">
          <dl>
            <dt>服务保障</dt>
            <dd>■ 正品服务</dd>
            <dd>■ 7天无理由放心退</dd>
            <dd>■ 7x15小时客户服务</dd>
            <dd>■ 7天无理由随心换</dd>
          </dl>
          <dl>
            <dt>购物指南</dt>
            <dd>■ 导购演示</dd>
            <dd>■ 订单操作</dd>
            <dd>■ 会员注册</dd>
            <dd>■ 账户管理</dd>
            <dd>■ 收货样品</dd>
            <dd>■ 会员等级</dd>
          </dl>
          <dl>
            <dt>支付方式</dt>
            <dd>■ 23家主流网银支付</dd>
            <dd>■ 支付宝、银联等支付</dd>
            <dd>■ 信用卡支付</dd>
            <dd>■ 零钱支付</dd>
          </dl>
          <dl>
            <dt>配送方式</dt>
            <dd>■ 配送范围及运费</dd>
            <dd>■ 验货与签收</dd>
          </dl>
          <dl>
            <dt>售后服务</dt>
            <dd>■ 退货政策</dd>
            <dd>■ 退货流程</dd>
            <dd>■ 退款方式和实效</dd>
            <dd>■ 换货服务</dd>
          </dl>
          <div class="last">
            <p>唯品会APP二维码</p>
            <img
              src="https://b.appsimg.com/2016/06/17/863/1466134037230.jpg"
              alt=""
            />
            <p>下载唯品会移动APP</p>
          </div>
        </div>
        <div class="footer_infor">
          <div>关于我们</div>
          <span>丨</span>
          <div>About us</div>
          <span>丨</span>
          <div>Investor Relations</div>
          <span>丨</span>
          <div>媒体报道</div>
          <span>丨</span>
          <div>品牌招商</div>
          <span>丨</span>
          <div>平台规则</div>
          <span>丨</span>
          <div>隐私条款</div>
          <span>丨</span>
          <div>唯品诚聘</div>
          <span>丨</span>
          <div>唯品卡</div>
          <span>丨</span>
          <div>联系我们</div>
          <span>丨</span>
          <div>廉政举报</div>
        </div>
        <div class="footer_txt">
                Copyright © 2008-现在 vip.com，All Rights Reserved&nbsp;&nbsp;使用本网站即表示接受
                <a href="#"> 唯品会用户协议 </a>
                版权所有
                <a href="#">广州唯品会电子商务有限公司</a>
                <br/>
                <a href="#"><img src="https://a.vpimg4.com/upload/actpics/act/sp/police_icon.png" alt="">粤公网安备 44010302111111号
                </a>
                <a href="#">粤ICP备08114786号</a>
                <a href="#">增值业务经营许可证：粤B2-20170777</a>
                <a href="#">网络文化经营许可证：粤网文〔2021〕2056-282号</a>
                <br/>
                <a href="#">经营主体证照</a>
                <a href="#">风险监测信息</a>
                <a href="#">互联网药品信息服务资格证书：（粤）-经营性-2018-0271</a>
                <a href="#">网络食品交易第三方平台备案凭证：粤B2-20170777</a>
                <a href="#">医疗器械网络交易服务第三方平台备案</a>
                <br/>
                <a href="#">凭证：（粤）网械平台备字[2019]第00001号</a>
                出版物网络交易平台服务经营备案证：粤新出网备（2021）1号 
                <a href="#">未成年人关怀专区</a>
                <br/>
                违法和不良信息举报电话：4006789888；举报邮箱：
                <a href="#">privacy@vipshop.com</a>
        </div>
        <ul class="footer_ft">
            <li></li>
            <li></li>
            <li><img src="https://xyt.xinchacha.com/img/icon/icon1.png" alt=""></li>
            <li></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "FooterView",
  data() {
    return {
      arr: null,
    };
  },
  methods: {
    addget() {
      this.$store.dispatch("a/actions_getHome"); //提交方法给actions
    },
  },
  created() {
    this.addget();
  },
};
</script>

<style scoped>
/* .Footer {
        width:;
        height: ;
    } */
.lisi {
  width: 1200px;
  margin: 0 auto;
}
.lisi ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.lisi ul li {
  width: 570px;
  height: 370px;
}
.lisi ul li img {
  width: 570px;
  height: 272px;
}
.lisi ul li div {
  cursor: pointer;
  font-size: 20px;
  color: #222;
  display: flex;
  align-items: center;
  margin-top: 18px;
  font-weight: bold;
}
.lisi ul li div .title {
  margin-top: 6px;
}
.lisi ul li div p span {
  font-size: 26px;
  color: #f03867;
}
/* 底部 */
.footer {
  border-top: 1px solid #ebebeb;
  background: #fcfcfc;
}
.footer-inner {
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
}
.footer-vip {
  display: flex;
  justify-content: center;
}
.footer-vip li {
  width: 72px;
  height: 76px;
  margin: 0 26px;
  margin-top: 30px;
  background: #f03867;
}
.footer-vip li:nth-child(1) {
  background: url("@/assets/footer_common.png") no-repeat;
}
.footer-vip li:nth-child(2) {
  background: url("@/assets/footer_common.png") no-repeat -118px 0px;
}
.footer-vip li:nth-child(3) {
  background: url("@/assets/footer_common.png") no-repeat -234px 0px;
}
.footer-vip li:nth-child(4) {
  background: url("@/assets/footer_common.png") no-repeat -356px 0px;
}
.footer-vip li:nth-child(5) {
  background: url("@/assets/footer_common.png") no-repeat -480px 0px;
}
.footer-vip li:nth-child(6) {
  background: url("@/assets/footer_common.png") no-repeat -604px 0px;
}
.footer-vip li:nth-child(7) {
  background: url("@/assets/footer_common.png") no-repeat -726px 0px;
}
.footer_list {
  display: flex;
  margin: 38px 0 26px;
}
.footer_list dl {
  width: 145px;
  height: 146px;
  padding-left: 16px;
  border-right: 1px solid #e0e0e0;
}
.footer_list dl dt {
  margin-bottom: 4px;
  color: #4d4d4d;
  font-size: 12px;
}
.footer_list dl dd {
  height: 20px;
  font-size: 12px;
  color: grey;
}
.last {
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.last img {
  width: 100px;
  height: 100px;
}
.last p {
  font-size: 12px;
  color: #4d4d4d;
}
.footer_infor {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #d7237e;
  color: #fff;
  font-size: 12px;
}
.footer_infor div:hover {
  color: #ccc;
  cursor: pointer;
}
.footer_txt {
    text-align: center;
    font-size: 12px;
    color:grey;
    margin: 14px 0;
}
.footer_txt a {
    color:grey;
}
.footer_txt a:hover {
    color:#f10180;
}
.footer_ft {
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer_ft li {
    margin:10px 10px;
}
.footer_ft li:nth-child(1) {
    width:100px;
    height:28px;
    background: url("@/assets/footer-hash.png") no-repeat 0px -156px;
}   
.footer_ft li:nth-child(2) {
    width: 76px;
    height: 40px;
    background: url("https://shop.vipstatic.com/img/common/footer_no_good-hash-1fe63524.png?64f2e6d6") no-repeat;
}
.footer_ft li:nth-child(3) img {
    width:76px;
    height: 28px;
}
.footer_ft li:nth-child(4) {
    width: 76px;
    height: 40px;
    background: url("@/assets/footer-hash.png") no-repeat 0px -450px;
}
</style>